<template>
	<div class="front_service_container">
		<div class="front_column_title service">
			<div class="search">
				<a-input-search placeholder="请输入服务" @search="handleSearch" />
			</div>
		</div>
		<div class="front_filter_form wrapper">
			<div class="item">
				<span class="label">办理部门</span>
				<a-select v-model="queryForm.deptId" placeholder="请选择" allow-clear>
					<a-option>Beijing</a-option>
					<a-option>Shanghai</a-option>
					<a-option>Guangzhou</a-option>
					<a-option disabled>Disabled</a-option>
				</a-select>
			</div>
			<div class="item">
				<span class="label">服务对象</span>
				<a-radio-group type="button" v-model="queryForm.object">
					<a-radio value="0">全部</a-radio>
					<a-radio value="1">本科生</a-radio>
					<a-radio value="2">研究生</a-radio>
					<a-radio value="3">留学生</a-radio>
					<a-radio value="4">教职工</a-radio>
					<a-radio value="5">离退休人员</a-radio>
				</a-radio-group>
			</div>
			<div class="item">
				<span class="label">服务名称</span>
				<a-radio-group type="button" v-model="queryForm.name">
					<a-radio value="0">全部</a-radio>
					<a-radio v-for="(item, index) in nameInitial" :key="index" :value="item.id">{{ item.label }}</a-radio>
				</a-radio-group>
			</div>
		</div>
		<div class="front_datas_list wrapper">
			<ul class="classify">
				<li class="active">全部分类</li>
				<li>推荐服务</li>
				<li>AI工具包</li>
				<li>信息数据</li>
				<li>组织宣传</li>
				<li>办公协同</li>
				<li>图档文博</li>
				<li>学生服务</li>
				<li>工会团委</li>
				<li>教学实验</li>
				<li>人事科研</li>
				<li>校友老干</li>
				<li>财务资产</li>
			</ul>
			<div class="mainbox">
				<a-row :gutter="[16, 16]">
					<a-col :span="6" v-for="(item, index) in cardDatas" :key="index"><service-item :data="item" @look="handleLookDetail" /></a-col>
				</a-row>
				<a-pagination :total="48" :default-page-size="16" show-total show-jumper />
			</div>
		</div>
		<service-detail v-model="detailDialog" :data="detailData"></service-detail>
	</div>
</template>

<script setup lang="ts">
import serviceItem from './item.vue';
import serviceDetail from './detail.vue';
const queryForm = reactive({ deptId: '', object: '0', name: '0' });
const nameInitial = computed(() =>
	Array.from({ length: 26 }, (_, i) => ({
		id: (i + 1).toString(),
		label: String.fromCharCode(65 + i)
	}))
);
const cardDatas = computed(() => {
	return Array.from({ length: 48 }, (_, i) => ({
		id: i + 1,
		title: '家具类合同预审（试运行）',
		depart: '后勤保障部',
		isCollect: i === 4,
		isCommon: i % 5 && i < 40 && i > 20
	}));
});

const detailData = ref({});
const detailDialog = ref(false);
const handleSearch = (value: string) => {
	console.log(value);
};

const handleLookDetail = (id: number) => {
	let data = cardDatas.value.find((item) => item.id === id);
	detailData.value = { ...data };
	detailDialog.value = true;
};
</script>

<style lang="scss" scoped>
.front_service_container {
	background-color: #fff;
}
.front_filter_form {
	.item {
		display: flex;
		align-items: center;
		margin-top: 16px;
		span {
			width: 4em;
			flex-shrink: 0;
			font-size: 15px;
			margin-right: 16px;
		}
	}
	.arco-radio-group-button {
		flex: 1;
		overflow: hidden;
		background-color: transparent;
	}
	:deep(.arco-radio-button::before) {
		content: none;
	}
	:deep(.arco-radio-button.arco-radio-checked) {
		color: #fff;
		background-color: rgb(var(--primary-6));
	}
}
.front_datas_list.wrapper {
	display: flex;
	align-items: flex-start;
	margin-bottom: 16px;
	ul.classify {
		width: 180px;
		flex-shrink: 0;
		margin-top: 16px;
		background-color: #f5f9fa;
		li {
			height: 44px;
			line-height: 44px;
			text-align: center;
			border-left: solid 2px transparent;
			font-size: 16px;
			cursor: pointer;
			color: #303133;
			&:hover,
			&.active {
				border-color: rgb(var(--primary-6));
				background-color: rgb(var(--primary-1));
			}
		}
	}
	.mainbox {
		flex: 1;
		overflow: hidden;
		margin-left: 16px;
		padding-top: 16px;
	}
	.arco-pagination {
		margin-top: 16px;
		justify-content: center;
	}
}
</style>
